<!--
/* @license
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>&lt;model-viewer&gt; List of Models</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link type="text/css" href="../styles/examples.css" rel="stylesheet" />
  <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"/>

  <!-- The following libraries and polyfills are recommended to maximize browser support -->



</head>
<body>

  <div class="sample">
    <div class="content">

      <div id="header">
        <a class="icon-button icon-modelviewer" href="../index.html"></a>
        <a class="icon-github icon-button" href="https://github.com/google/model-viewer/blob/master/examples/rendering-showcase.html"></a>
      </div>

      <div class="wrapper">

        <h2 class="demo-title">Shows how &lt;model-viewer&gt; optimizes rendering only elements
        that are visible in the viewport.</h2>

      </div>

    </div>

    <div class="demo" style="background-color: #222; flex-direction: column; height: 400vh;">
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (1 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (2 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (3 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (4 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (5 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (6 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (7 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (8 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (9 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (10 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (11 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (12 of 13)"></model-viewer>
      <model-viewer background-color="#222" src="../shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut (13 of 13)"></model-viewer>
    </div>

  </div>

  <div class="footer">
    <div class="attribution">
      <a href="https://poly.google.com/view/dLHpzNdygsg">Astronaut</a> by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
      licensed under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>.
    </div>
    <div class="copyright">©Copyright 2018-2025 Google Inc. Licensed under the Apache License 2.0.</div>
  </div>


  <!-- Documentation-specific dependencies: -->
  <script type="module"
      src="./built/dependencies.js">
  </script>

  <!-- Loads <model-viewer> on modern browsers: -->
  <script type="module"
      src="../../../node_modules/@google/model-viewer/dist/model-viewer.js">
  </script>
</body>
</html>
